<ui:composition template="../template/plantilla_01.xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">

    <f:metadata>
        <f:viewParam name="idPromocion" value="#{promocionBean.idPromocion}"/>
        <f:event type="preRenderView" listener="#{promocionBean.cargarPromocion}" />
    </f:metadata>
    
    <ui:define name="head" >
        <h:outputStylesheet library="css" name="promocion.css"/>
    </ui:define>

    <ui:define name="loginUsuario" />

    <ui:define name="panelCentral" >

        <h:form prependId="false" >

            <p:messages showDetail="true" rendered="#{empty promocionBean.promocion}"  />
              <div class="contenedorPromocion">
            <p:wizard flowListener="#{promocionBean.onFlowProcess}" backLabel="Atrás" nextLabel="Siguiente"
                      rendered="#{not empty promocionBean.promocion}" >

                <p:tab id="inicio" title="Inicio" >

                    <p:messages showDetail="true" />
                    <p:graphicImage value="#{promocionBean.promocion.pathImagenInicio}" alt="Imagen promo"  />

                </p:tab>

                <p:tab id="identificacion" title="Identificación" rendered="#{not usuarioSessionBean.estaRegistrado}">

                    <p:panel header="Identificación en la tienda virtual" style="height: 400px;">

                        <p:messages showDetail="true" />

                            
                        <h:panelGroup id="pgLogin" layout="block" style="width: 400px; margin-bottom: 15px;"
                                      rendered="#{not promocionBean.skipLogin}">

                            <p:inputText id="txtUsuario2" value="#{usuarioSessionBean.usuario.nombre}"

                                     requiredMessage="El usuario es obligatorio" size="13" >
                                <f:validateLength maximum="20" />
                            </p:inputText>
                            <p:watermark for="txtUsuario2" value="Usuario" />

                            <p:spacer width="5" height="10" />

                            <p:password value="#{usuarioSessionBean.usuario.password}" feedback="false" id="txtPassword2"
                                    maxlength="20"
                                    requiredMessage="La clave es obligatoria" size="13"
                                     />
                            <p:watermark for="txtPassword2" value="Clave" />
                            <p:spacer width="5" height="10" />

                        </h:panelGroup>

                        <h:panelGrid columns="2" >

                            <p:selectBooleanCheckbox value="#{promocionBean.skipLogin}" >
                                <p:ajax event="change" update="@form" />
                            </p:selectBooleanCheckbox>
                            <h:outputText value="No recuerdo mis datos de acceso. Deseo ingresar la información personalmente"
                                          style="font-size: 12px; font-weight: bold;"/>

                        </h:panelGrid>

                    </p:panel>

                </p:tab>

                <p:tab id="datos" title="Sus Datos">

                    <p:panel header="Ingrese sus datos" style="height: 400px;">

                        <p:messages showDetail="false" />

                        <h:panelGrid columns="2" columnClasses="colLabel,colDato" >

                            <h:outputText value="Razón Social*:" />

                            <h:outputText value="#{promocionBean.pedido.cliente.nombre}" rendered="#{usuarioSessionBean.estaRegistrado}" />
                            <p:inputText value="#{promocionBean.razonSocial}" rendered="#{not usuarioSessionBean.estaRegistrado}"
                                         size="60" required="true" requiredMessage="La razón social es obligatoria" />

                            <h:outputText value="Cuit*:" rendered="#{not usuarioSessionBean.estaRegistrado}" />
                            <p:inputMask value="#{promocionBean.cuit}" mask="99-99999999-9"
                                         rendered="#{not usuarioSessionBean.estaRegistrado}"
                                         size="14" required="true" requiredMessage="El número de cuit es obligatorio"  />

                            <h:outputText value="E-mail:" />

                            <p:inputText value="#{promocionBean.pedido.cliente.direml}" size="80" rendered="#{usuarioSessionBean.estaRegistrado}" />
                            <p:inputText value="#{promocionBean.direcciónEmail}"        size="80" rendered="#{not usuarioSessionBean.estaRegistrado}" />

                            <h:outputText value="Notas o aclaraciones" />
                            <p:inputTextarea cols="60" rows="3" value="#{promocionBean.observaciones}" />

                        </h:panelGrid>
                    
                    </p:panel>
                    
                </p:tab>

                <p:tab id="seleccionCombo" title="Elija su combo"
                       rendered="#{promocionBean.promocion.productoUnico=='N'}">

                    <p:panel header="Promociones disponibles" style="min-height: 400px; height: auto;">

                        <p:messages showDetail="true" id="message"/>
                        <p:selectManyCheckbox id="pageDirection"
                                              value="#{promocionBean.seleccion}"
                                              layout="pageDirection"
                                              styleClass="itemsPromocion">
                            
                            <f:selectItems value="#{promocionBean.promocion.itemsPromocion}"  var="i"
                                           itemValue="#{i.orden}" itemLabel="#{i.producto.descrp}"  />
                        </p:selectManyCheckbox>
                    </p:panel>

                </p:tab>

                <p:tab id="cantidades" title="Cantidades">

                    <p:panel header="Ingrese las cantidades a pedir" style="min-height: 400px;">

                        <p:messages showDetail="true" />
                        
                        <p:spacer height="5" width="100%" />

                        <p:dataTable id="tDetalle" value="#{promocionBean.pedido.itemsProducto}" var="i"
                                 emptyMessage="No tiene productos en el pedido"
                                 scrollable="true" 
                                 style="font-size: 9.5px;">

                            <p:column  width="45">

                                <p:lightBox rendered="#{not empty i.producto.imggra}" >
                                    <h:outputLink value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imggra}.jpg"
                                                  title="#{i.producto.descrp}">

                                        <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imgchi}.jpg"
                                                            width="50" height="50"
                                                            rendered="#{not empty i.producto.imgchi}" />
                                    </h:outputLink>
                                </p:lightBox>

                                <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imgchi}.jpg"
                                                width="50" height="50"
                                                rendered="#{not empty i.producto.imgchi and empty i.producto.imggra}" />

                                <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}intercap.jpg"
                                                width="50" height="50"
                                                rendered="#{empty i.producto.imgchi}"
                                                style="border: 1px solid lightgrey;" />
                            </p:column>

                            <p:column headerText="Código" width="75" style="text-align: center;" >
                                <h:outputText value="#{i.producto.codigo}"/>
                                
                            </p:column>

                            <p:column headerText="Descripción" width="280"  >
                                <h:outputText value="#{i.producto.descrp}"/>
                            </p:column>

                            <p:column headerText="Present." width="60" >
                                <h:outputText value="#{i.producto.unidadConversion.unidad} #{i.producto.faccon} #{i.producto.unidadMedida.unidad} " />
                            </p:column>

                            <p:column headerText="Cantidad" width="85" style="text-align: center;" >
                                
                                <p:inputText value="#{i.cantid}" size="5"  >
                                    <f:convertNumber pattern="###" />                                    
                                </p:inputText>
                                <p:spacer width="2"/>
                                <p:commandButton action="#" update="tDetalle" icon="conversor16"
                                                 title="Actulizar precio" />
                                    
                            </p:column>

                            <p:column headerText="Pcio Promo. c/IVA" width="100"
                                      style="text-align: right;">

                                <h:outputText id="precioPromo" value="#{i.precioFinalConIVA}"  >
                                    <f:convertNumber pattern="$ 0.00" />
                                </h:outputText>
                            </p:column>

                            <p:column id="total" headerText="Total" width="100" style="text-align: right;">

                                <h:outputText value="#{i.totalLineaConIVA}">
                                    <f:convertNumber pattern="$ 0.00"  />
                                </h:outputText>

                            </p:column>

                            <f:facet name="footer" >
                                <div align="right" class="totalPromo" style="width: 850px;">
                                    <h:outputText value="Importe total c/IVA: "  />
                                    <h:outputText id="totalPedido" value="#{promocionBean.pedido.subTotalConIVA}" >
                                        <f:convertNumber pattern="$ 0.00" />
                                    </h:outputText>
                                </div>
                            </f:facet>

                        </p:dataTable>                        

                    </p:panel>                    
                </p:tab>

                <p:tab id="condicionPago" title="Condición de Pago" >

                    <p:panel header="Condición de pago" style="height: 400px;">

                        <p:messages showDetail="true" />

                        <h:panelGrid columns="2" columnClasses="colLabel,colDato" style="width: 300px;" >

                            <h:outputText value="Condición de pago" />
                            <p:selectOneMenu value="#{promocionBean.codigoCondicionDePago}" required="true"
                                             label="Condición de pago"
                                             requiredMessage="Seleccione una condición de pago por favor">
                                <f:selectItem itemLabel="Seleccionar" itemValue="" />
                                <f:selectItem itemLabel="Contado"           itemValue="010" />
                                <f:selectItem itemLabel="Cuenta Corriente"  itemValue="004" />
                            </p:selectOneMenu>

                        </h:panelGrid>
                        
                        <h:panelGroup layout="block" style="width: 600px; padding: 15px; font-size: 13px;">
                            
                            <h:outputText value="#{promocionBean.promocion.notasCondiconPago}" />
                            
                        </h:panelGroup>
                        
                    </p:panel>
                </p:tab>

                <p:tab id="confirmacion" title="Confirmación">

                    <p:panel header="Confirmación de compra" style="height: 400px;"
                             rendered="#{not promocionBean.compraConfirmada}">

                        <p:messages showDetail="true" />

                        <p:commandButton value="Confirmar compra" icon="ok16"
                                         rendered="#{not promocionBean.compraConfirmada}"
                                         actionListener="#{promocionBean.confirmarCompra}"
                                         update="@form" process="@this" />                           
                    </p:panel>

                    <p:messages showDetail="true" rendered="#{promocionBean.compraConfirmada}" />

                    <h:commandLink action="/global/index.xhtml" immediate="true"
                                       rendered="#{promocionBean.compraConfirmada}"
                                       style="font-size: 12px; font-weight: bold;" >

                        <p:graphicImage value="#{aplicacionBean.parametro.pathImagenPromocionFin}" />

                     </h:commandLink>

                </p:tab>
                
            </p:wizard>
              </div>
           
            <h:panelGroup layout="block" styleClass="saldoActual"
                          style="width: 100%;  padding: 15px;"
                          rendered="#{not empty promocionBean.promocion.tituloA4Promocional and not empty promocionBean.promocion.pathA4Promocional}">
                
                <h:outputText value="#{promocionBean.promocion.tituloA4Promocional}    " />
                <a href="#{promocionBean.promocion.pathA4Promocional}" target="_blank">Ver</a>  |  <a href="#{promocionBean.promocion.pathA4Promocional}" download="#{promocionBean.promocion.pathA4Promocional}">Descargar</a>    
                                
            </h:panelGroup>        
            
        </h:form>
        
        <p:spacer height="30"/>

  </ui:define>
    
</ui:composition>